function downloadClock({ clockColor }) {
    function clock() {
        context.clearRect(-200, -200, 400, 400);

        //表盘的绘制
        context.beginPath();
        context.arc(0, 0, 200, 0, 2 * Math.PI);
        context.strokeStyle = clockColor;
        context.lineWidth = 8;
        context.stroke();

        //刻度的绘制,关注当前坐标系的状态，在特定状态下进行绘制
        for (var i = 0; i < 60; i++) {
            context.beginPath();
            if (i % 5 == 0) {
                context.moveTo(170, 0);
                context.lineTo(190, 0);
                context.strokeStyle = "red";
                context.lineWidth = 6;
            } else {
                context.moveTo(176, 0);
                context.lineTo(190, 0);
                context.strokeStyle = "black";
                context.lineWidth = 4;
            }
            context.stroke();
            context.rotate(Math.PI / 30);
        }

        //绘制表盘的数字
        for (var i = 0; i < 12; i++) {
            var numDeg = (i + 1) * Math.PI / 6 - Math.PI / 2;
            context.textAlign = "center";
            context.textBaseline = "middle";
            var numX = 140 * Math.cos(numDeg);
            var numY = 140 * Math.sin(numDeg);
            context.fillText(i + 1, numX, numY);
        }

        //进行时针分针秒针的绘制
        var date1 = new Date();
        var hour = date1.getHours();
        var minute = date1.getMinutes();
        var second = date1.getSeconds();
        hour = hour > 12 ? (hour - 12) : hour;//判断》12点时解决方法
        //旋转角度
        var hourDeg = (hour + minute / 60) * Math.PI / 6;
        var minuteDeg = (minute + second / 60) * Math.PI / 30;
        var secondDeg = second * Math.PI / 30;
        //在当前坐标系中位置
        hourDeg = hourDeg - Math.PI / 2;
        minuteDeg = minuteDeg - Math.PI / 2;
        secondDeg = secondDeg - Math.PI / 2;
        //时针
        var hourStartX = -20 * Math.cos(hourDeg);
        var hourStartY = -20 * Math.sin(hourDeg);

        var hourEndX = 130 * Math.cos(hourDeg);
        var hourEndY = 130 * Math.sin(hourDeg);

        context.beginPath();
        context.moveTo(hourStartX, hourStartY);
        context.lineTo(hourEndX, hourEndY);
        context.strokeStyle = "purple";
        context.lineWidth = 6;
        context.stroke();

        //分针的绘制
        var minuteStartX = -20 * Math.cos(minuteDeg);
        var minuteStartY = -20 * Math.sin(minuteDeg);

        var minuteEndX = 134 * Math.cos(minuteDeg);
        var minuteEndY = 134 * Math.sin(minuteDeg);

        context.beginPath();
        context.moveTo(minuteStartX, minuteStartY);
        context.lineTo(minuteEndX, minuteEndY);
        context.strokeStyle = "pink";
        context.lineWidth = 6;
        context.stroke();

        //秒针的绘制
        var secondStartX = -20 * Math.cos(secondDeg);
        var secondStartY = -20 * Math.sin(secondDeg);

        var secondEndX = 138 * Math.cos(secondDeg);
        var secondEndY = 138 * Math.sin(secondDeg);

        context.beginPath();
        context.moveTo(secondStartX, secondStartY);
        context.lineTo(secondEndX, secondEndY);
        context.strokeStyle = "red";
        context.lineWidth = 4;
        context.stroke();
        //画圆
        context.beginPath();
        context.arc(110 * Math.cos(secondDeg), 110 * Math.sin(secondDeg), 6, 0, 2 * Math.PI);
        context.fillStyle = "red";
        context.fill();
        context.beginPath();
        context.arc(110 * Math.cos(secondDeg), 110 * Math.sin(secondDeg), 3, 0, 2 * Math.PI);
        context.fillStyle = "black";
        context.fill();
    }
    clock();
    setInterval(clock, 1000);
}
